/**
 * @deprecated
 * Test code used by test-01.htm
 */
Ext.require(['Ext.chart.*', 'Ext.data.*']);
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.container.Container']);

(function(viz){
   
   function generateData(n, floor){
      var data = [],
          i;
            
      floor = (!floor && floor !== 0)? 20 : floor;
        
      for (i = 0; i < (n || 12); i++) {
         data.push({
            name: Ext.Date.monthNames[i % 12],
            data1: Math.floor(Math.max((Math.random() * 100), floor)),
            data2: Math.floor(Math.max((Math.random() * 100), floor)),
            data3: Math.floor(Math.max((Math.random() * 100), floor)),
            data4: Math.floor(Math.max((Math.random() * 100), floor)),
            data5: Math.floor(Math.max((Math.random() * 100), floor)),
            data6: Math.floor(Math.max((Math.random() * 100), floor)),
            data7: Math.floor(Math.max((Math.random() * 100), floor)),
            data8: Math.floor(Math.max((Math.random() * 100), floor)),
            data9: Math.floor(Math.max((Math.random() * 100), floor))
            ,nested: {
               v1: Math.floor(Math.max((Math.random() * 100), floor))
            }
         });
      }
      return data;
   }
   
   var vizStore = new Ext.data.Store({
//   var vizStore = Ext.create('Ext.data.Store', {
//   var vizStore = Ext.create('Ext.data.JsonStore', {
      fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9', 'nested.v1']
      ,data: generateData()
      ,proxy: {
         type: 'memory'
         ,reader: {
            type: 'json'
            ,useSimpleAccessors: false
         }
      }
   });
   
//   function showChart() {
//      vizStore.loadData(generateData(8));
//    
//      var chart = Ext.create('Ext.chart.Chart', {
//         renderTo: 'chart',
//         width: '100%',
//         height: '100%',
//         style: 'background:#fff',
//         animate: true,
//         store: vizStore,
//         shadow: true,
//         theme: 'Category1',
//         legend: {
//            position: 'right'
//         },
//         axes: [{
//            type: 'Numeric',
//            minimum: 0,
//            position: 'left',
//            fields: ['data1', 'data2', 'data3', 'nested.v1'],
//            title: 'Number of Hits',
//            minorTickSteps: 1,
//            grid: {
//               odd: {
//                  opacity: 1,
//                  fill: '#ddd',
//                  stroke: '#bbb',
//                  'stroke-width': 0.5
//               }
//            }
//         }, {
//            type: 'Category',
//            position: 'bottom',
//            fields: ['name'],
//            title: 'Month of the Year'
//         }],
//         series: [{
//            type: 'line',
//            highlight: {
//               size: 7,
//               radius: 7
//            },
//            axis: 'left',
//            xField: 'name',
//            yField: 'data1',
//            markerConfig: {
//               type: 'cross',
//               size: 4,
//               radius: 4,
//               'stroke-width': 0
//            }
//         }, {
//            type: 'line',
//            highlight: {
//               size: 7,
//               radius: 7
//            },
//            axis: 'left',
//            smooth: true,
//            xField: 'name',
//            yField: 'data2',
//            markerConfig: {
//               type: 'circle',
//               size: 4,
//               radius: 4,
//               'stroke-width': 0
//            }
//         }, {
//            type: 'line',
//            highlight: {
//               size: 7,
//               radius: 7
//            },
//            axis: 'left',
//            smooth: true,
//            fill: true,
//            xField: 'name',
//            yField: 'data3',
//            markerConfig: {
//               type: 'circle',
//               size: 4,
//               radius: 4,
//               'stroke-width': 0
//            }
//         }, {
//            type: 'line',
//            highlight: {
//               size: 7,
//               radius: 7
//            },
//            axis: 'left',
//            smooth: true,
//            fill: true,
//            xField: 'name',
//            yField: 'nested.v1',
//            markerConfig: {
//               type: 'circle',
//               size: 4,
//               radius: 4,
//               'stroke-width': 0
//            }
//         }]
//      });
//   }
   function showChart() {
      vizStore.loadData(generateData(8));
    
//      var win = Ext.create('Ext.container.Container', {
      var win = Ext.create('Ext.Window', {
         width: 800,
         height: 300,
         hidden: false,
         title: 'Line Chart',
//         renderTo: 'chart',
         renderTo: Ext.getBody(),
         layout: 'fit',
//         modal: true,
//         tbar: [{
//            text: 'Reload Data',
//            handler: function() {
//               vizStore.loadData(generateData(8));
//            }
//         }],
         items: {
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            store: vizStore,
            shadow: true,
            theme: 'Category1',
            legend: {
               position: 'right'
            },
            axes: [{
               type: 'Numeric',
               minimum: 0,
               position: 'left',
               fields: ['data1', 'data2', 'data3', 'nested.v1'],
               title: 'Number of Hits',
               minorTickSteps: 1,
               grid: {
                  odd: {
                     opacity: 1,
                     fill: '#ddd',
                     stroke: '#bbb',
                     'stroke-width': 0.5
                  }
               }
            }, {
               type: 'Category',
               position: 'bottom',
               fields: ['name'],
               title: 'Month of the Year'
            }],
            series: [{
               type: 'line',
               highlight: {
                  size: 7,
                  radius: 7
               },
               axis: 'left',
               xField: 'name',
               yField: 'data1',
               markerConfig: {
                  type: 'cross',
                  size: 4,
                  radius: 4,
                  'stroke-width': 0
               }
            }, {
               type: 'line',
               highlight: {
                  size: 7,
                  radius: 7
               },
               axis: 'left',
               smooth: true,
               xField: 'name',
               yField: 'data2',
               markerConfig: {
                  type: 'circle',
                  size: 4,
                  radius: 4,
                  'stroke-width': 0
               }
            }, {
               type: 'line',
               highlight: {
                  size: 7,
                  radius: 7
               },
               axis: 'left',
               smooth: true,
               fill: true,
               xField: 'name',
               yField: 'data3',
               markerConfig: {
                  type: 'circle',
                  size: 4,
                  radius: 4,
                  'stroke-width': 0
               }
            }, {
               type: 'line',
               highlight: {
                  size: 7,
                  radius: 7
               },
               axis: 'left',
               smooth: true,
               fill: true,
               xField: 'name',
               yField: 'nested.v1',
               markerConfig: {
                  type: 'circle',
                  size: 4,
                  radius: 4,
                  'stroke-width': 0
               }
            }]
         }
      });
   }
   
   viz.store = vizStore;
   viz.showChart = showChart;
   
}(window.vvgViz = window.vvgViz || {}));

//var vvgViz = {
//   showChart: function () {
//      store1.loadData(generateData(8));
//    
////      var win = Ext.create('Ext.panel.Panel', {
////         layout: {
////           type: 'fit' 
////         },
//      var win = Ext.create('Ext.Window', {
////         width: '100%',
////         height: '100%',
//         width: 800,
//         height: 600,
//         minHeight: 400,
//         minWidth: 550,
//         hidden: false,
//         maximizable: true,
//         title: 'Line Chart',
//         renderTo: 'chart',
////         renderTo: Ext.get('chart'),
////         renderTo: Ext.getBody(),
//         layout: 'fit',
//         modal: true,
//         tbar: [{
//            text: 'Reload Data',
//            handler: function() {
//               store1.loadData(generateData(8));
//            }
//         }],
//         items: {
//            xtype: 'chart',
//            style: 'background:#fff',
//            animate: true,
//            store: store1,
//            shadow: true,
//            theme: 'Category1',
//            legend: {
//               position: 'right'
//            },
//            axes: [{
//               type: 'Numeric',
//               minimum: 0,
//               position: 'left',
//               fields: ['data1', 'data2', 'data3'],
//               title: 'Number of Hits',
//               minorTickSteps: 1,
//               grid: {
//                  odd: {
//                     opacity: 1,
//                     fill: '#ddd',
//                     stroke: '#bbb',
//                     'stroke-width': 0.5
//                  }
//               }
//            }, {
//               type: 'Category',
//               position: 'bottom',
//               fields: ['name'],
//               title: 'Month of the Year'
//            }],
//            series: [{
//               type: 'line',
//               highlight: {
//                  size: 7,
//                  radius: 7
//               },
//               axis: 'left',
//               xField: 'name',
//               yField: 'data1',
//               markerConfig: {
//                  type: 'cross',
//                  size: 4,
//                  radius: 4,
//                  'stroke-width': 0
//               }
//            }, {
//               type: 'line',
//               highlight: {
//                  size: 7,
//                  radius: 7
//               },
//               axis: 'left',
//               smooth: true,
//               xField: 'name',
//               yField: 'data2',
//               markerConfig: {
//                  type: 'circle',
//                  size: 4,
//                  radius: 4,
//                  'stroke-width': 0
//               }
//            }, {
//               type: 'line',
//               highlight: {
//                  size: 7,
//                  radius: 7
//               },
//               axis: 'left',
//               smooth: true,
//               fill: true,
//               xField: 'name',
//               yField: 'data3',
//               markerConfig: {
//                  type: 'circle',
//                  size: 4,
//                  radius: 4,
//                  'stroke-width': 0
//               }
//            }]
//         }
//      });
//   }
//};